<template>
  <div class="lod" style="height: 100%">
    <div class="navIcon" style="height: 100%">
      <img class="navIconImg" style="height: 100%" src="http://xunpfimg.oss-cn-beijing.aliyuncs.com/img/home_icon_bg.ca4dcc0.png">
      <div class="navIconImgMB"></div>
      <div class="navIconImgSpan">寻找每个人内心自然智朴的家</div>
    </div>
    <div class="home_icon_down" v-show="false">
      <div class="navHomeBanner">
        <img class="navHomeBanner_bg" src="../../images/home_bannerBg.png">
        <img class="navHomeBanner_bgT" src="../../images/home_huang.png">
        <!--bannerContent-->
        <div class="navHomeBannerContent">
          <div class="navHomeBannerContent_left">
            <span class="navHomeBannerContent_span1">{{listData[num].name}}</span>
            <span class="navHomeBannerContent_span2">{{listData[num].Ename}}</span>
            <span class="navHomeBannerContent_span3">{{listData[num].number}}</span>
          </div>
          <div class="navHomeBannerContent_left">
            <span class="navHomeBannerContent_span4">{{listData[num].Content}}</span>
          </div>
        </div>
        <!--bannerContent-->

        <!--banner-->
        <div class="navHomeBanner_nav">
          <div class="navHomeBanner_item" v-for="(item,index) in listData" @mouseover="bannerHover(index)" >
            <img class="navHomeBanner_item_img" v-show="index==0" src="http://xunpfimg.oss-cn-beijing.aliyuncs.com/img/home_banner1.9dff214">
            <img class="navHomeBanner_item_img" v-show="index==1" src="http://xunpfimg.oss-cn-beijing.aliyuncs.com/img/home_banner2.57ba64f.png">
            <img class="navHomeBanner_item_img" v-show="index==2" src="http://xunpfimg.oss-cn-beijing.aliyuncs.com/img/home_banner3.5240f52.png">
            <div class="navHomeBanner_item_imgMenban" v-show="index!=num"></div>
            <div class="navHomeBanner_item_btn " :class="{navHomeBanner_item_btn2:index==num}">
              <span class="navHomeBanner_item_span1">{{item.name}}</span>
              <span class="navHomeBanner_item_span2">{{item.Ename}}</span>
            </div>
            <span class="navHomeBanner_item_number">{{item.number}}</span>
          </div>
          <!--<div class="navHomeBanner_item">-->
          <!--<img class="navHomeBanner_item_img" src="../../images/home_banner2.png">-->
          <!--<div class="navHomeBanner_item_btn navHomeBanner_item_btn2">-->
          <!--<span class="navHomeBanner_item_span1">AI家居定制服务</span>-->
          <!--<span class="navHomeBanner_item_span2">Real estate value-added service specialist</span>-->
          <!--</div>-->
          <!--<span class="navHomeBanner_item_number">02</span>-->
          <!--</div>-->

        </div>
        <!--banner-->
      </div>
      <!--homeList-->
      <div class="homeList">
        <div class="homeItem">
          <div class="homeItemImg homeItemleft">
            <img class="homeItemImg1" src="../../images/home_listbg.png">
            <img class="homeItemImg2" src="../../images/home_list_icon.png">
          </div>
          <div class="homeItemContent homeItemright">
            <div class="homeItemContentTitle">
              <img class="homeItemContentTitleImg" src="../../images/home_list_name.png">
              <div>房产行业AI服务提供商</div>
              <div class="homeItemContentTitle_lin"></div>
            </div>
            <div class="homeItemContent_c">
              寻扑房以物联网AI技术、大数据采集与分析、智慧生态系统，<br>
              人机交互系统及智能资产管理系统为基础，<br>
              为房产行业提供全开放、全兼容、全交互的互联网AI技术及综合服务。<br>
            </div>
          </div>
        </div>
        <div class="homeItem">
          <div class="homeItemImg  homeItemright">
            <img class="homeItemImg1" src="../../images/home_listbg.png">
            <img class="homeItemImg2" src="../../images/home_list_icon.png">
          </div>
          <div class="homeItemContent homeItemleft">
            <div class="homeItemContentTitle">
              <img class="homeItemContentTitleImg" src="../../images/home_list_name.png">
              <div>房产行业AI服务提供商</div>
              <div class="homeItemContentTitle_lin"></div>
            </div>
            <div class="homeItemContent_c">
              寻扑房以物联网AI技术、大数据采集与分析、智慧生态系统，<br>
              人机交互系统及智能资产管理系统为基础，<br>
              为房产行业提供全开放、全兼容、全交互的互联网AI技术及综合服务。<br>
            </div>
          </div>
        </div>
      </div>
      <!--homeList-->
      <img class="home_ybg" src="../../images/home_ybg.png">
    </div>
  </div>
</template>

<script>
  export default {
    name: "navhome",
    data() {
      return {
        listData: [
          {
            "name": "房产增值服务专家",
            "Ename": "Real estate value-added service specialist",
            "number": "01",
            "Content": "寻扑房以物联网AI技术、大数据采集与分析、智慧生态系统，人机交互系统及智能资产管理系统为基础，为房产行业提供全开放、全兼容、全交互的互联网AI技术及综合服务。",
          }, {
            "name": "AI家居定制服务",
            "Ename": "Real estate value-added service specialist",
            "number": "02",
            "Content": "寻扑房以物联网AI技术、大数据采集与分析、智慧生态系统，人机交互系统及智能资产管理系统为基础，为房产行业提供全开放、全兼容、全交互的互联网AI技术及综合服务。",
          }, {
            "name": "房产行业互联网技术服务",
            "Ename": "Real estate value-added service specialist",
            "number": "03",
            "Content": "寻扑房以物联网AI技术、大数据采集与分析、智慧生态系统，人机交互系统及智能资产管理系统为基础，为房产行业提供全开放、全兼容、全交互的互联网AI技术及综合服务。",
          },
        ],
        num: 0
      }
    },
    methods: {
      bannerHover: function (id) {
        var _this = this;
        _this.num = id
      }
    },
    mounted() {
    }
  }
</script>

